<script setup lang="ts">
const { safeArea } = uni.getSystemInfoSync()

// 跳转到设备取货页面
const goToDevicePickup = () => {
  uni.navigateTo({
    url: '/pagesDevice/device-pickup/device-pickup',
  })
}
</script>
<template>
  <!-- 自定义导航栏 -->
  <view class="custom-nav" :style="{ paddingTop: safeArea?.top + 'px' }">
    <!-- 顶部品牌区域 -->
    <view class="brand-area">
      <view class="left-section">
        <view class="brand">
          <text class="brand-name">爱心小屋</text>
          <text class="brand-desc">| 互助·共享·爱心</text>
        </view>
        <view class="scan-btn" @tap="goToDevicePickup">
          <image src="@/static/images/扫一扫.svg" mode="aspectFit" class="scan-icon"></image>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: 35rpx;
  border-bottom-right-radius: 35rpx;

  .brand-area {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 24rpx;

    .left-section {
      display: flex;
      align-items: center;

      .scan-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15rpx;

        .scan-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .brand {
        display: flex;
        align-items: center;

        .brand-name {
          font-size: 34rpx;
          color: #2b85e4;
          font-weight: bold;
        }

        .brand-desc {
          font-size: 22rpx;
          color: #666;
          margin-left: 8rpx;
        }
      }
    }
  }
}
</style>
